<template>
  <div class="wantToSee">
    <div class="title">
      <div class="back-wrapper"><back></back></div>
      我的想看
    </div>
    <div class="refresh-wrapper" v-show="isRefresh">
      <refresh></refresh>
    </div>
    <div class="content" ref="content">
      <div class="line-block-items">
        <div class="empty" v-show="isRemove">
          <p class="text">还没有想看到电影哦</p>
        </div>
        <div class="item" v-for="item in sawList" @click="$router.push({path:'/onlineMovieDetails',query:{id:item.id}})">
          <div class="img-wrapper">
            <img :src="item.posterPicUrl" alt="" width="100%" height="100%">
          </div>
          <div class="text-wrapper">
            <h1 class="name">{{item.name}}</h1>
            <p class="introduction">{{item.nameDesc}}</p>
            <p class="protagonist">{{item.cast}}</p>
          </div>
          <div class="score-wrapper">
            {{item.score}}
          </div>
        </div>
      </div>
      <endLine :text="'我是有底线的'" v-show="endFlag&&sawList.length"></endLine>
    </div>

  </div>
</template>

<script>
  import back from '../../../components/back/back'
  import BScroll from 'better-scroll'
  import {getStorage} from "../../../common/js/localStorage";
  import {Toast} from 'mint-ui'
  import refresh from '../../../components/refresh/refresh'
  import endLine from '../../../components/endLine/endLine'
  import global from '../../../common/js/global'
  export default {
    name: "wantToSee",
    components:{
      'back':back,
      'refresh':refresh,
      'endLine':endLine
    },
    data(){
      return{
        evaluation:true,
        isRefresh:false,
        isRemove:true,
        sawList:[

        ],
        rows:100
      }
    },
    methods:{
      _getWantSeeList(){
        this.$axios(
          {
            method:'post',
            headers:{
              "Content-Type":"application/json",
              "MOBILE-DEVICE":'PSD_H5_1_MPS',
              "JSESSIONID":getStorage('userInfo').JSESSIONID
            },
            url:global.$host+'/member/myWantSeeList',
            data:{
              rows:this.rows,
              offset:0
            }
          }
        ).then((res)=>{
          if(res.status===global.ERR_OK){
            if(res.data.code===0){
              let data = res.data.data
              this.endFlag = data.endFlag
              this.sawList = data.wantSeeList
              if(!this.sawList){
                this.isRemove = true
              }else {
                this.isRemove = false
              }
            }else if(res.data.code===10){
              this.$router.push('/login')
            }else {
              Toast(res.data.errorMsg)
            }
          }else {
          }

        })
      }
    },
    mounted() {
      this._getWantSeeList()
      this.$nextTick(()=>{
        if(!this.scroll){
          // return
          let scroll = new BScroll(this.$refs['content'],{
            click:true,
            pullUpLoad:{
              threshold:-50
            },
            pullDownRefresh: {
              threshold: 40,
              stop: 30
            }
          })
          //下拉回弹刷新停留事件600ms
          scroll.on('pullingDown', () => {
            this.isRefresh = true
            setTimeout(()=>{
              window.history.go(0)
              scroll.finishPullDown();
            },600)
          });
          let _this = this
          scroll.on('pullingUp',()=>{
            _this.rows+=10;
            _this._getWantSeeList()
            scroll.refresh()
            scroll.finishPullUp()
          })
        }else {
          this.scroll.refresh();
        }
      })
    }
  }
</script>

<style scoped lang="stylus">
  .wantToSee
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 72px)
      padding 20px 0
      overflow hidden
      .line-block-items
        padding-bottom 20px
        .empty
          position absolute
          left calc(50% - 80px)
          top 80px
          height 20px
          width 160px
          background url("icon_wantSee_empty@2x.png")no-repeat center top/124px 124px
          padding-top 160px
          .text
            height 20px
            font-size 12px
            color #666666
            line-height 20pxs
        .item
          display flex
          height 102px
          background #171718
          margin-bottom 10px
          padding 9px 14px
          .img-wrapper
            flex 0 0 70px
            background url("bg_poster.png")no-repeat center/100%
          .text-wrapper
            flex 1
            text-align left
            overflow hidden
            padding 15px 0 0 15px
            .name,.introduction,.protagonist
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            .name
              height 22px
              line-height 22px
              color #ffffff
              font-size 16px
            .introduction
              height 17px
              line-height 17px
              padding-top 8px
              color #ffffff
              font-size 12px
            .protagonist
              height 16px
              line-height 16px
              font-size 11px
              color #8B929E
              padding-top 8px
          .score-wrapper
            flex 0 0 75px
            position relative
            text-align center
            padding-top 20px
            color #F7C20F
            font-size 16px
            .score
              position absolute
              top 42px
              right 0px
              width 53px
              height 28px
              border-radius 14px
              border none
              background #EEAC21
              color #161719
              font-size 14px
              outline none
            &.evaluation
              background url("bg_evaluation.svg")no-repeat 25px 45px/50px 63px

</style>
